<template>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <div class="layui-layout layui-layout-admin pagetabs-add">
        <div class="layui-header">
            <!-- 头部logo -->
            <div class="layui-logo layui-bg-black">
                <img src="/assets/images/simmah.png" alt="simmah-admin">
                <span>Bang Admin</span>
            </div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <!-- 头部左侧区域 -->
            <ul class="layui-nav layui-layout-left" lay-filter="top-left-menu">
                <!-- 菜单按钮 -->
                <li class="layui-nav-item layui-hide-xs left-menu" lay-unselect="">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-shrink-right"></i>
                    </a>
                </li>
                <!-- 搜索按钮 -->
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:;" class="layui-icon layui-icon-search"></a>
                </li>
            </ul>
            <!-- 头部右侧区域 -->
            <ul class="layui-nav layui-layout-right" lay-filter="top-right-menu">
                <!-- 标签按钮 -->
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:;" class="layui-icon layui-icon-notice"></a>
                </li>
                <!-- 全屏按钮 -->
                <li class="layui-nav-item layui-hide-xs screen" lay-unselect="">
                    <a href="javascript:;" class="layui-icon layui-icon-screen-full"></a>
                </li>
                <!-- 个人信息 -->
                <li class="layui-nav-item layui-show-sm-inline-block">
                    <a href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        tester
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">基本资料</a></dd>
                        <dd><a href="javascript:;" lay-filter="logOut">注销登录</a></dd>
                    </dl>
                </li>
                <!-- 右侧菜单 -->
                <li class="layui-nav-item" lay-filter="right-menu" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree " lay-filter="left-menu">
                    {#each menu_data as v,k}
                    <li class="layui-nav-item">
                        <a href="javascript:;" tag="{{v.tag}}" path="{{v.path}}">
                            <i class="{{v.icon}}"></i>
                            <span>{{v.title}}</span>
                        </a>
                        {#if v.children}
                        <dl class="layui-nav-child">
                            {#each (v.children) as vv,kk}
                            <dd>
                                <a href="javascript:;" tag="{{vv.tag}}" path="{{vv.path}}">{{vv.title}}</a>
                            </dd>
                            {/each}
                        </dl>
                        {/if}
                    </li>
                    {/each}
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容页面选项卡 -->
            <div class="layui-pagetabs">
                <a href="javascript:;" class="prev">
                    <i class="layui-icon layui-icon-prev"></i>
                </a>
                <ul class="pagetabs-nav">
                    <li class="layui-this" tag="{{default_page.tag_name}}" path="{{default_page.path}}">
                        <a href="javascript:;">
                            {#html default_page.content}
                        </a>
                    </li>
                </ul>
                <a href="javascript:;" class="next">
                    <i class="layui-icon layui-icon-next"></i>
                </a>
                <a href="javascript:;" class="down">
                    <i class="layui-icon layui-icon-down"></i>
                </a>
            </div>
            <!-- 内容页面内容 -->
            <div class="layui-pagetabs-body">
                {#html default_page.tag}
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>
    <!-- 手机端菜单 -->
    <div class="pe-left-menu">
        <i class="layui-icon layui-icon-shrink-right"></i>
    </div>
</template>
<script>
    let element = layui.element
    let $ = (query) => layui.$(query, dom.shadow)
    let dropdown = layui.dropdown
    let app = layui.app
    let layer = layui.layer

    // 注册组件
    app.component(["right-menu"])

    // 菜单数据
    let menu_data = [
        {
            tag: "work-space",
            icon: "layui-icon layui-icon-console",
            title: "工作空间",
            children: [
                {
                    tag: "analyze-page",
                    title: "分析页",
                    path: "/app/page/work-space/analyze.html"
                },
                {
                    tag: "world-page",
                    title: "工作台",
                    path: "/app/page/work-space/world.html"
                }
            ]
        },
        {
            tag: "list-page",
            icon: "layui-icon layui-icon-auz",
            title: "列表页面",
            children: [
                {
                    tag: "table-form",
                    title: "数据页面",
                    path: "/app/page/list-page/table.html"
                },
                {
                    tag: "list-form",
                    title: "表单页面",
                    path: "/app/page/list-page/form.html"
                }
            ]
        }
    ]
    // 默认标签页
    let default_page = {
        content: `<i class="layui-icon layui-icon-home"></i>`,
        tag_name: "analyze-page",
        path: "/app/page/work-space/analyze.html",
        tag: "<analyze-page></analyze-page>"
    }
    // 注册组件
    app.component(default_page.tag_name, default_page.path)

    // 请求周期
    onRequest(function (request) {
        // console.log(request)
    })

    // 方法周期
    onMethods(function () {
        element.render('nav', $(`[lay-filter="left-menu"]`))
        element.render('nav', $(`[lay-filter="top-left-menu"]`))
        element.render('nav', $(`[lay-filter="top-right-menu"]`))
        layui.use(["fn"], function () {
            let fn = layui.fn

            // 左侧菜单按钮
            fn.home.left_menu($)
            // 页面选项卡
            fn.home.pagetabs($)
            // 全屏开关
            fn.home.screen($)
            // 右侧菜单按钮
            $(`[lay-filter="right-menu"]`).click(function () {
                layer.open({
                    type: 1,
                    offset: 'r',
                    title: false,
                    anim: 'slideLeft', // 从右往左
                    area: ['300px', '100%'],
                    closeBtn: 0,
                    shade: 0.1,
                    shadeClose: true,
                    id: 'right-menu',
                    content: '<right-menu></right-menu>'
                })
            })
            // 模拟注销登录
            $(`[lay-filter="logOut"]`).click(function () {
                fn.home.logOut()
            })
        })

    })
</script>
<style>
    .layui-body {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        left: 220px;
        transition: all 235ms ease-in-out 0s;
    }

    .layui-pagetabs {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        box-sizing: border-box;
        height: 40px;
        min-height: 40px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
    }

    .layui-pagetabs>a {
        width: 40px;
        min-width: 40px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .layui-pagetabs>a:last-child {
        border-left: 1px solid #f5f5f5;
    }

    .layui-pagetabs>ul {
        width: 100%;
        box-sizing: border-box;
        border-left: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        overflow: auto hidden;
        white-space: nowrap;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .layui-pagetabs>ul .layui-this {
        color: #16b777;
        background-color: #f5f5f5;
    }

    .layui-pagetabs>ul .layui-this a,
    .layui-pagetabs>ul .layui-this span,
    .layui-pagetabs>ul .layui-this i:first-child {
        color: #16b777;
    }

    .layui-pagetabs>ul::-webkit-scrollbar {
        height: 0px;
        width: 0px;
    }

    .layui-pagetabs>ul li {
        display: inline-block;
        height: 100%;
        border-right: 1px solid #f5f5f5;
        position: relative;
    }

    .layui-pagetabs>ul li>a {
        padding: 0 15px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        gap: 5px;
    }

    .layui-pagetabs>ul li>a .layui-icon-close {
        transition: all 235ms ease-in-out 0s;
    }

    .layui-pagetabs>ul li>a .layui-icon-close:hover {
        color: #f5f5f5;
        background-color: #ff5722;
    }

    .layui-pagetabs-body {
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        padding: 18px;
    }

    .layui-layout-admin .layui-logo {
        width: 220px;
        transition: all 235ms ease-in-out 0s;
    }

    .layui-layout-admin .layui-side {
        width: 220px;
        transition: all 235ms ease-in-out 0s;
    }

    .layui-nav.layui-nav-tree {
        width: 100%;
    }

    .layui-logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .layui-layout-left {
        left: 220px;
        transition: all 235ms ease-in-out 0s;
    }

    .layui-layout-admin .layui-footer {
        left: 220px;
        transition: all 235ms ease-in-out 0s;
    }

    .layui-nav-tree .layui-nav-item>a {
        height: 56px;
        line-height: 56px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .layui-nav-tree .layui-nav-item a i {
        margin-right: 12px;
    }

    .layui-nav-tree .layui-nav-item a span {
        font-size: 13.5px;
    }

    .layui-nav-tree .layui-nav-item dd a {
        height: 48px;
        line-height: 48px;
    }

    .layui-nav-tree .layui-nav-bar {
        display: none !important;
    }

    .layui-logo img {
        max-width: 100%;
        max-height: 40px;
        padding: 0 10px;
        display: none;
    }

    .layui-layout-left .layui-nav-bar,
    .layui-layout-right .layui-nav-bar {
        top: 0 !important;
        /* 官方bug暂时先none */
        display: none;
    }

    .layui-layout-right .layui-this:after,
    .layui-layout-left .layui-this:after {
        top: 0 !important;
    }

    /* pc收缩菜单样式 */
    .admin-mini .layui-header .layui-logo span {
        display: none;
        transition: all 235ms ease-in-out 0s;
    }

    .admin-mini .layui-header .layui-logo {
        width: 60px;
    }

    .admin-mini .layui-header .layui-layout-left {
        left: 60px;
    }

    .admin-mini .layui-side {
        width: 60px;
    }

    .admin-mini .layui-footer {
        left: 60px;
    }

    .admin-mini .layui-body {
        left: 60px;
    }

    .admin-mini .layui-header .layui-logo img {
        display: block;
        transition: all 235ms ease-in-out 0s;
    }

    .admin-mini .layui-nav-tree .layui-nav-item a span {
        display: none;
    }

    .admin-mini .layui-nav-tree .layui-nav-item .layui-nav-child {
        display: none;
    }

    .pe-left-menu {
        position: fixed;
        right: 10px;
        bottom: 50px;
        width: 40px;
        height: 40px;
        background: #16b777;
        color: #fff;
        display: none;
        z-index: 999;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
    }

    .pe-left-menu:active {
        background: #16b77777;
    }

    .pe-left-menu i {
        font-size: 22px;
    }

    @media screen and (max-width: 992px) {
        .admin-pe .layui-body {
            left: 0;
        }

        .admin-pe .layui-layout-left {
            left: 0;
        }

        .admin-pe .layui-header .layui-logo {
            /* width: 60px; */
            z-index: 10;
        }

        .admin-pe .layui-footer {
            left: 0;
        }

        .pe-left-menu {
            display: flex;
        }
    }
</style>